<template>
    <div>
        <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
  :immediate-check = "false"
>
  <ul>
      <li v-for="item in list" :key="item.id" @click="jumpTopicdetail(item.id)">
          <img :src="item.scene_pic_url" alt="">
          <div class="info">
              <p class="title">{{item.title}}</p>
              <p class="intro">{{item.subtitle}}</p>
              <p class="price">{{item.price_info}}元起</p>
          </div>
      </li>
  </ul>
</van-list>
<div class="h80"></div>
         <tab-bar></tab-bar>
    </div>
</template>
<script>
import tabbar from '../../components/tabbar'
import { topic } from '../../api/topic/index'
import { mapMutations } from 'vuex'
export default {
    data() {
        return {
            start:1,
            loading:false,
            finished:false,
            list:[]
        }
    },
    methods: {
        ...mapMutations(["gettopicId"]),
        jumpTopicdetail(id) {
            this.gettopicId(id)
            this.$router.push({path:'/pages/topicdetail/main',query:{
                id:JSON.stringify(id)
            }})
        },
        init() {
            topic({page:this.start}).then(res=>{
                console.log(res);
                this.list.push(...res.data)
                this.start++
                if (this.start > res.total) {
                    this.finished = true
                }
                this.loading = false
            })
        },
        onLoad() {
            this.init()
        }
    },
    created() {
        this.init()
    },
    components: {
    "tab-bar":tabbar
  },
}
</script>
<style lang="scss" scoped>
.van-list {
    background-color: #f4f4f4;
    margin-bottom: 50px;
    ul {
        li {
            background-color: #fff;
            margin-bottom: 10px;
            img {
                display: block;
                width: 100%;
            }
            .info {
                box-sizing: border-box;
             padding: 0 15px;
                .title {
                    font-size: 17px;
                    color: rgb(51,51,51);
                    font-weight: 700;
                }
                .intro {
                    font-size: 12px;
                    color: rgb(153,153,153);
                }
                .price {
                    font-size: 13px;
                    color: rgb(180,40,45);
                    padding-bottom: 20px;
                }
            }
        }
    }
}
</style>